<template>
  <div class="ticketorder">
    <div class="title">西安→北京</div>
    <div class="ticket_content">
      <div class="flight_info">
        <div class="time_info">08月01日 周日 07:25</div>
        <div class="loc_info">首都机场-浦东机场 经济舱</div>
        <van-divider />
      </div>
      <div class="price_info">
        <div class="price">
          <span class="price_item">￥562</span>/成人
          <span class="other_price">￥900</span>/儿童
        </div>
        <div class="other_info">
          <span class="other_price">￥50</span>/机建燃油
          <span class="other_price">￥0</span>/机建燃油
        </div>
      </div>
    </div>

    <div class="pass_info">
      <van-form @submit="onSubmit">
        <div class="pass_input" v-for="(item, index) of num_peo" :key="index">
          <van-field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="姓名"
          />
          <van-field
            v-model="password"
            type="password"
            name="身份证号"
            label="身份证号"
            placeholder="身份证号"
          />
        </div>

        <div style="margin: 16px">
          <van-button round block type="info" @click="add_peo"
            >添加乘机人(最多三人)</van-button
          >
        </div>
      </van-form>
    </div>

    <div class="phone">
      <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="联系人"
            label="联系人"
            placeholder="请输入联系人"
          />
          <van-field
            v-model="password"
            type="password"
            name="手机号"
            label="手机号 +86/"
            placeholder="请输入手机号"
          />
          <van-field
            v-model="password"
            type="password"
            name="邮箱"
            label="邮箱"
            placeholder="请输入邮箱"
          />
      </van-form>
    </div>

    <div class = "sub">
      <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num_peo: 1,
      price: 0
    };
  },
  mounted() {
    let test = this.$route.query;
    console.log(test);
  },
  methods: {
    add_peo() {
      if (this.num_peo < 3) {
        this.num_peo++;
      } else {
        this.$toast("订单人数已达上限");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ticketorder {
  width: 94vw;
  height: 1000px;
  margin: 0 auto;
  color: #767676;

  // background-color: antiquewhite;
  .title {
    text-align: center;
    font-size: 22px;
    color: #000;
    line-height: 50px;
    margin-top: 25px;
  }
  .ticket_content {
    padding: 8px;
    border: 1px solid #e5e5e5;
    background-color: white;
    border-radius: 5px;

    // height: 500px;
    .flight_info {
      margin-top: 10px;
      .time_info {
        font-size: 20px;
        color: #000;
        font-weight: 700;
        // margin-top: -10px;
      }
      .loc_info {
        line-height: 35px;
      }
    }
    .price_info {
      padding-bottom: 13px;

      .price_item {
        font-size: 24px;
        color: red;
        font-weight: 700;
      }
      .other_price {
        font-weight: 700;
        font-size: 22px;
        color: #000;
      }
    }
  }
  .pass_info {
    padding: 8px;
    border: 1px solid #e5e5e5;
    background-color: white;
    border-radius: 5px;
    margin-top: 15px;
  }
  .phone {
    padding: 8px;
    border: 1px solid #e5e5e5;
    background-color: white;
    border-radius: 5px;
    margin-top: 15px;
  }
  .sub {
    margin-top: 15px;
    background-color: white;

  }
}
</style>